import React, { useState, useEffect } from 'react';
import { Routes, Route } from 'react-router-dom';
import Header from './components/Header';
import Home from './pages/Home';
import BlogList from './pages/BlogList';
import BlogPost from './pages/BlogPost';
import NotesList from './pages/NotesList';
import NotePost from './pages/NotePost';
import About from './pages/About';
import { ThemeProvider } from './context/ThemeContext';
import { WebsiteJsonLd } from './components/JsonLd';

function App() {
  return (
    <ThemeProvider>
      <div className="min-h-screen bg-gray-50 dark:bg-gray-900 transition-colors duration-300">
        <WebsiteJsonLd />
        <Header />
        <main role="main">
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/blog" element={<BlogList />} />
            <Route path="/blog/:id" element={<BlogPost />} />
            <Route path="/notes" element={<NotesList />} />
            <Route path="/notes/:category" element={<NotesList />} />
            <Route path="/notes/:category/:id" element={<NotePost />} />
            <Route path="/about" element={<About />} />
          </Routes>
        </main>
      </div>
    </ThemeProvider>
  );
}

export default App;
